import React, {Component} from 'react';
import {
    View, Text, TextInput,
    StyleSheet
} from 'react-native';

import {
    Input, Card, Button
} from 'react-native-elements';
import Icon from 'react-native-vector-icons/Feather'

export default class AuthLoginScreen extends Component {
    render() {
        console.log('Auth login', this.props.navigation.parmas);
        return (
            <View style={styles.container}>
                {/* <Card style={styles.form}>
                    <Input
                        placeholder='请输入手机号'
                        autoCapitalize='none'
                        leftIcon={
                            <Icon
                                name='user'
                                size={18}
                            />
                        }
                    />
                    <Input
                        placeholder='请输入密码'
                        secureTextEntry={true}
                        autoCapitalize='none'
                        leftIcon={
                            <Icon
                                name='shield'
                                size={18}
                            />
                        }
                    />
                </Card> */}
                <View style={styles.form}>
                    <TextInput
                        placeholder='请输入手机号'
                        autoCapitalize={'none'}
                        keyboardType={'numeric'}
                    />
                    <TextInput
                        placeholder='请输入密码'
                        autoCapitalize={'none'}
                        secureTextEntry={true}
                    />
                    <View style={styles.formButtonGroup}>
                        <Button
                            title='登录'
                            titleStyle={_styles.loginButton.title}
                            buttonStyle={_styles.loginButton.button}
                            containerStyle={_styles.loginButton.container}
                        />
                        <Button
                            title='微信登录'
                            titleStyle={_styles.loginButton.title}
                            buttonStyle={_styles.loginButton.button}
                            containerStyle={_styles.loginButton.container}
                        />
                        <Button
                            title='注册'
                            titleStyle={_styles.loginButton.title}
                            buttonStyle={_styles.loginButton.button}
                            containerStyle={_styles.loginButton.container}
                            onPress={() => this.props.navigation.navigate('auth.register')}
                        />
                    </View>
                </View>

                <View></View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        // flex: 1,
        // justifyContent: 'center',
        alignItems: 'center',
    },
    form: {
        // flex: 1,
        // justifyContent: 'center',
        // alignItems: 'center',
        width: '80%',
        marginTop: '30%',
    },
    formButtonGroup: {
        // flex: 1,
        // justifyContent: 'center',
        // alignItems: 'center',
        // width: '80%',
        marginTop: 10,
    },
});

const _styles = {
    loginButton: {
        container: {
            marginTop: 10,
        }
    }
}